#include('../header.html', {title: '我的提问'})

<div id="content-container" class="container">
  <div class="row row-3-9 my-layout">
    <div class="col-md-3">
      #include('sideMenu.html', {user: '', name: '我的提问'})
    </div>

    <div id="vue-comment" class="col-md-9">
      <div class="panel panel-default panel-col">
        <div class="panel-heading">我的提问</div>
        <div class="panel-body">
          <div v-if="empty" class="empty">还没有写过任何提问</div>

          <div v-if="!empty">
            <ul class="media-list">
              <que-li v-for="(que, index) in questions" :que="que" :key="index"></que-li>
              <nav v-if="page.totalPages>1" class="text-center">
                <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
              </nav>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<template id="que-li">
  <li class="media">
    <div class="media-body">
      <!--回复数-->
      <span class="badge pull-right" style="margin-top:15px;">{{que.results}}</span>
      <div class="mbm">
        <span class="label label-info" title="问答帖">问</span>
        <a :href="'/course/'+que.course.id+'/join/info?wid='+que.id">
          <strong>{{que.title}}</strong>
        </a>
      </div>
      <div class="color-gray text-normal">
        <span>
          来自<a :href="'/user/'+que.user.id+'/home'" class="link-primary">{{que.user.username}}</a>
        </span>
        <span class="bullet">•</span>
        <span>
          <span>{{que.lastTime}}发布</span>
          <span class="bullet">•</span>
        </span>
        <span>{{que.looks}}浏览</span>
      </div>
    </div>
  </li>
</template>

<script type="text/javascript">
  var vm = new Vue({
    el: '#vue-comment',
    data: {
      questions: [],
      page: {
        pageNum: 1,
        totalPages: 1,
        limit: 10
      }
    },
    created: function () {
        this.getPage();
    },
    computed: {
      empty: function () {
        return this.questions.length <= 0;
      }
    },
    watch: {
      'page.pageNum': function (nv) {
        this.getPage();
      }
    },
    components: {
      'que-li': {
        props: ['que'],
        template: '#que-li'
      }
    },
    methods: {
      gotoPage: function (page) {
        this.page.pageNum = page;
      },
      getPage: function () {
        var self = this;
        $.post('/course/ask/api/user/getAsk', {page: this.page.pageNum}, function (data) {
          if (data.success) {
            self.questions = [];
            self.questions = data.payload.rows;
            self.page.pageNum = data.payload.pageNum;
            self.page.totalPages = data.payload.totalPages;
          }
        })
      }
    }
  });
</script>
#include('../footer.html')